﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/blank.Master" AutoEventWireup="true" CodeBehind="jquery_validation.aspx.cs" Inherits="Template.Web.Admin.jquery_validation" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    <div class="col-lg-12">
        <section class="panel panel-primary">
            <header class="panel-heading"><i class="fa fa-search"></i>用户信息添加</header>
            <div class="panel-body">
                <form class="form-horizontal" role="form" id="myForm">
                    <div class="form-body">
                        <div class="form-group">
                            <label class="col-md-3 control-label">用户姓名：<span class="text-danger">*</span></label>
                            <div class="col-md-4">
                                <input id="userName" name="userName" type="text" class="form-control input_maxlength" placeholder="" maxlength="10" required />
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">年龄：<span class="text-danger">*</span></label>
                            <div class="col-md-4">
                                <input id="age" name="age" type="text" class="form-control" placeholder="" required>
                                <span class="help-block"></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-4 col-md-8">
                                <button id="btnSubmit" type="submit" class="btn btn-info "><i class="fa fa fa-pencil-square-o"></i>提交</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <pre class="brush: js">
            &lt;script src=&quot;/scripts/validation/jquery.validate.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
            &lt;script src=&quot;/scripts/validation/localization/messages_zh.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

            &lt;script&gt;
                $(document).ready(function () {
                    $(&quot;#myForm&quot;).validate({
                        errorElement: &#x27;span&#x27;,
                        errorClass: &#x27;help-block help-block-error&#x27;,
                        focusInvalid: true,
                        rules: {
                            userName: {
                                required: true
                            },
                            age: &#x27;required&#x27;
                        },
                        invalidHandler: function (event, validator) {

                        },
                        highlight: function (element) {
                            $(element).closest(&#x27;.form-group&#x27;).addClass(&#x27;has-error&#x27;);
                        },
                        unhighlight: function (element) {
                            $(element).closest(&#x27;.form-group&#x27;).removeClass(&#x27;has-error&#x27;);
                        },
                        success: function (label) {
                            label.closest(&#x27;.form-group&#x27;).removeClass(&#x27;has-error&#x27;);
                        },
                        submitHandler: function () {
                            alert(&quot;提交事件!&quot;);
                        }
                    });
                });
            &lt;/script&gt;            
        </pre>
    </div>


    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="page-header">
                <div class="alert alert-info" role="alert">
                    <h4>This demo shows how to integrate JQuery-validation and the Bootstrap framework.</h4>
                    <ul>
                        <li><a href="http://getbootstrap.com/" class="alert-link">Bootstrap home project</a>.</li>
                    </ul>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Simple Form</h3>
                </div>
                <div class="panel-body">
                    <form id="signupForm" method="post" class="form-horizontal" action="" novalidate="novalidate">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="firstname">First name</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="firstname" name="firstname" placeholder="First name">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="lastname">Last name</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username">Username</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="username" name="username" placeholder="Username">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="email">Email</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="email" name="email" placeholder="Email">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="password">Password</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="confirm_password">Confirm password</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm password">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-5 col-sm-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="agree" name="agree" value="agree">Please agree to our policy
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-9 col-sm-offset-4">
                                <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <pre class="brush: js">
&lt;script type=&quot;text/javascript&quot;&gt;
        $.validator.setDefaults({
            submitHandler: function () {
                alert(&quot;submitted!&quot;);
            }
        });

        $(document).ready(function () {
            $(&quot;#signupForm&quot;).validate({
                rules: {
                    firstname: &quot;required&quot;,
                    lastname: &quot;required&quot;,
                    username: {
                        required: true,
                        minlength: 2
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password: {
                        required: true,
                        minlength: 5,
                        equalTo: &quot;#password&quot;
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    agree: &quot;required&quot;
                },
                messages: {
                    firstname: &quot;Please enter your firstname&quot;,
                    lastname: &quot;Please enter your lastname&quot;,
                    username: {
                        required: &quot;Please enter a username&quot;,
                        minlength: &quot;Your username must consist of at least 2 characters&quot;
                    },
                    password: {
                        required: &quot;Please provide a password&quot;,
                        minlength: &quot;Your password must be at least 5 characters long&quot;
                    },
                    confirm_password: {
                        required: &quot;Please provide a password&quot;,
                        minlength: &quot;Your password must be at least 5 characters long&quot;,
                        equalTo: &quot;Please enter the same password as above&quot;
                    },
                    email: &quot;Please enter a valid email address&quot;,
                    agree: &quot;Please accept our policy&quot;
                },
                errorElement: &quot;em&quot;,
                errorPlacement: function (error, element) {
                    // Add the &#x60;help-block&#x60; class to the error element
                    error.addClass(&quot;help-block&quot;);

                    if (element.prop(&quot;type&quot;) === &quot;checkbox&quot;) {
                        error.insertAfter(element.parent(&quot;label&quot;));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).parents(&quot;.col-sm-5&quot;).addClass(&quot;has-error&quot;).removeClass(&quot;has-success&quot;);
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents(&quot;.col-sm-5&quot;).addClass(&quot;has-success&quot;).removeClass(&quot;has-error&quot;);
                }
            });

        });
&lt;/script&gt;

            </pre>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Using feedback icons</h3>
                </div>
                <div class="panel-body">
                    <form id="signupForm1" method="post" class="form-horizontal" action="" novalidate="novalidate">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="firstname1">First name</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="firstname1" name="firstname1" placeholder="First name">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="lastname1">Last name</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="lastname1" name="lastname1" placeholder="Last name">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username1">Username</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="username1" name="username1" placeholder="Username">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="email1">Email</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="email1" name="email1" placeholder="Email">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="password1">Password</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" id="password1" name="password1" placeholder="Password">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="confirm_password1">Confirm password</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" id="confirm_password1" name="confirm_password1" placeholder="Confirm password">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-5 col-sm-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="agree1" name="agree1" value="agree">Please agree to our policy
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-9 col-sm-offset-4">
                                <button type="submit" class="btn btn-primary" name="signup1" value="Sign up">Sign up</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <pre class="brush: js">
&lt;script type=&quot;text/javascript&quot;&gt;
        $.validator.setDefaults({
            submitHandler: function () {
                alert(&quot;submitted!&quot;);
            }
        });

        $(document).ready(function () {
            $(&quot;#signupForm1&quot;).validate({
                rules: {
                    firstname1: &quot;required&quot;,
                    lastname1: &quot;required&quot;,
                    username1: {
                        required: true,
                        minlength: 2
                    },
                    password1: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password1: {
                        required: true,
                        minlength: 5,
                        equalTo: &quot;#password1&quot;
                    },
                    email1: {
                        required: true,
                        email: true
                    },
                    agree1: &quot;required&quot;
                },
                messages: {
                    firstname1: &quot;Please enter your firstname&quot;,
                    lastname1: &quot;Please enter your lastname&quot;,
                    username1: {
                        required: &quot;Please enter a username&quot;,
                        minlength: &quot;Your username must consist of at least 2 characters&quot;
                    },
                    password1: {
                        required: &quot;Please provide a password&quot;,
                        minlength: &quot;Your password must be at least 5 characters long&quot;
                    },
                    confirm_password1: {
                        required: &quot;Please provide a password&quot;,
                        minlength: &quot;Your password must be at least 5 characters long&quot;,
                        equalTo: &quot;Please enter the same password as above&quot;
                    },
                    email1: &quot;Please enter a valid email address&quot;,
                    agree1: &quot;Please accept our policy&quot;
                },
                errorElement: &quot;em&quot;,
                errorPlacement: function (error, element) {
                    // Add the &#x60;help-block&#x60; class to the error element
                    error.addClass(&quot;help-block&quot;);

                    // Add &#x60;has-feedback&#x60; class to the parent div.form-group
                    // in order to add icons to inputs
                    element.parents(&quot;.col-sm-5&quot;).addClass(&quot;has-feedback&quot;);

                    if (element.prop(&quot;type&quot;) === &quot;checkbox&quot;) {
                        error.insertAfter(element.parent(&quot;label&quot;));
                    } else {
                        error.insertAfter(element);
                    }

                    // Add the span element, if doesn&#x27;t exists, and apply the icon classes to it.
                    if (!element.next(&quot;span&quot;)[0]) {
                        $(&quot;&lt;span class=&#x27;glyphicon glyphicon-remove form-control-feedback&#x27;&gt;&lt;/span&gt;&quot;).insertAfter(element);
                    }
                },
                success: function (label, element) {
                    // Add the span element, if doesn&#x27;t exists, and apply the icon classes to it.
                    if (!$(element).next(&quot;span&quot;)[0]) {
                        $(&quot;&lt;span class=&#x27;glyphicon glyphicon-ok form-control-feedback&#x27;&gt;&lt;/span&gt;&quot;).insertAfter($(element));
                    }
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).parents(&quot;.col-sm-5&quot;).addClass(&quot;has-error&quot;).removeClass(&quot;has-success&quot;);
                    $(element).next(&quot;span&quot;).addClass(&quot;glyphicon-remove&quot;).removeClass(&quot;glyphicon-ok&quot;);
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents(&quot;.col-sm-5&quot;).addClass(&quot;has-success&quot;).removeClass(&quot;has-error&quot;);
                    $(element).next(&quot;span&quot;).addClass(&quot;glyphicon-ok&quot;).removeClass(&quot;glyphicon-remove&quot;);
                }
            });
        });
&lt;/script&gt;

            </pre>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script src="/scripts/validation/jquery.validate.min.js" type="text/javascript"></script>
    <script src="/scripts/validation/localization/messages_zh.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $("#myForm").validate({
                errorElement: 'span',
                errorClass: 'help-block help-block-error',
                focusInvalid: true,
                rules: {
                    userName: {
                        required: true
                    },
                    age: 'required'
                },
                invalidHandler: function (event, validator) {

                },
                highlight: function (element) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-error');
                },
                success: function (label) {
                    label.closest('.form-group').removeClass('has-error');
                },
                submitHandler: function () {
                    alert("提交事件!");
                }
            });
        });
    </script>

    <script type="text/javascript">
        $.validator.setDefaults({
            submitHandler: function () {
                alert("submitted!");
            }
        });

        $(document).ready(function () {
            $("#signupForm").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    username: {
                        required: true,
                        minlength: 2
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    agree: "required"
                },
                messages: {
                    firstname: "Please enter your firstname",
                    lastname: "Please enter your lastname",
                    username: {
                        required: "Please enter a username",
                        minlength: "Your username must consist of at least 2 characters"
                    },
                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    confirm_password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long",
                        equalTo: "Please enter the same password as above"
                    },
                    email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                },
                errorElement: "em",
                errorPlacement: function (error, element) {
                    // Add the `help-block` class to the error element
                    error.addClass("help-block");

                    if (element.prop("type") === "checkbox") {
                        error.insertAfter(element.parent("label"));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
                }
            });

            $("#signupForm1").validate({
                rules: {
                    firstname1: "required",
                    lastname1: "required",
                    username1: {
                        required: true,
                        minlength: 2
                    },
                    password1: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password1: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password1"
                    },
                    email1: {
                        required: true,
                        email: true
                    },
                    agree1: "required"
                },
                messages: {
                    firstname1: "Please enter your firstname",
                    lastname1: "Please enter your lastname",
                    username1: {
                        required: "Please enter a username",
                        minlength: "Your username must consist of at least 2 characters"
                    },
                    password1: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    confirm_password1: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long",
                        equalTo: "Please enter the same password as above"
                    },
                    email1: "Please enter a valid email address",
                    agree1: "Please accept our policy"
                },
                errorElement: "em",
                errorPlacement: function (error, element) {
                    // Add the `help-block` class to the error element
                    error.addClass("help-block");

                    // Add `has-feedback` class to the parent div.form-group
                    // in order to add icons to inputs
                    element.parents(".col-sm-5").addClass("has-feedback");

                    if (element.prop("type") === "checkbox") {
                        error.insertAfter(element.parent("label"));
                    } else {
                        error.insertAfter(element);
                    }

                    // Add the span element, if doesn't exists, and apply the icon classes to it.
                    if (!element.next("span")[0]) {
                        $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>").insertAfter(element);
                    }
                },
                success: function (label, element) {
                    // Add the span element, if doesn't exists, and apply the icon classes to it.
                    if (!$(element).next("span")[0]) {
                        $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>").insertAfter($(element));
                    }
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
                    $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
                    $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
                }
            });
        });
    </script>
</asp:Content>
